<template>
  <view class="dy-scroll-container">
    <dy-navbar title="waterfall 瀑布流" />
    <scroll-view class="dy-scroll dy-bg-fifth" scroll-y="">
      <dy-waterfall v-model="list" :wait="300">
        <template v-slot:left="{ items }">
          <view v-for="(item, index) in items" :key="index" class="waterfall-demo">
            <dy-img :src="item.image" border-radius="12" lazy-load />
          </view>
        </template>
        <template v-slot:right="{ items }">
          <view v-for="(item, index) in items" :key="index" class="waterfall-demo">
            <dy-img :src="item.image" border-radius="12" lazy-load />
          </view>
        </template>
      </dy-waterfall>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Waterfall',
  data() {
    return {
      list: [
        {
          image: require('../../../../static/img/271bea8f-aece-4265-a2c7-565cf6e863be.png')
        },
        {
          image: require('../../../../static/img/c227f889-22f4-4506-9b41-3e6a60706564.png')
        },
        {
          image: require('../../../../static/img/23c0cf6e-1d6d-4d03-b882-bbc5c5085ec8.png')
        },
        {
          image: require('../../../../static/img/851359b6-a630-4b5a-b693-e36c704f52b3.png')
        },
        {
          image: require('../../../../static/img/54bfd54f-0d00-432b-8deb-9b49653d7461.png')
        },
        {
          image: require('../../../../static/img/896a48d8-705d-4b7f-820e-178be243a91a.png')
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.waterfall-demo {
  position: relative;
  padding: 16rpx;
  margin: 12rpx;
  background-color: #ffffff;
  border-radius: 8px;
}
</style>
